﻿<template>
  <div class="kaoshiXueke-container">
  <el-dialog v-model="isShowDialog" :width="1000" :height="1000" draggable="">
    <template #header>
      <div style="color: #fff">
        <!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
        <span>考试名称：{{ props.title }}</span>
      </div>
    </template>
    <el-button type="primary" icon="ele-Plus" @click="openAddKaoshiXueke" v-auth="'kaoshiXueke:save'"> 新增 </el-button>
    <el-button type="primary" icon="ele-Plus" @click="saveXueke" v-auth="'kaoshiXueke:save'"> 保存 </el-button>
    <el-card class="full-table" shadow="hover" style="margin-top: 8px">
      <el-table
				:data="tableData"
				style="width: 100%"
				v-loading="loading"
				tooltip-effect="light"
				row-key="id"
				border="">
        <el-table-column prop="index" label="序号" width="100" show-overflow-tooltip="">
          <template #default="scope">
            <el-input v-model="scope.row.index" placeholder="请输入序号" maxlength="100" clearable />
          </template>
        </el-table-column>
        <!-- <el-table-column type="index" label="序号" width="55" align="center"/>
        <el-table-column prop="kaoshiId" label="考试Id" width="100" align="center"/>
        <el-table-column prop="kaoshiId" label="考试" width="120" show-overflow-tooltip="">
          <template #default="scope">
            <span>{{scope.row.kaoshiIdName}}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="xuekeId" label="学科" width="120" show-overflow-tooltip="">
          <template #default="scope">
            <el-select clearable filterable v-model="scope.row.xuekeId" placeholder="请选择学科">
								<el-option v-for="(item,index) in xuekeXuekeIdDropdownList" :key="index" :value="item.value" :label="item.label" />		
						</el-select>
          </template>
        </el-table-column>
        <el-table-column prop="startShijian" label="开始时间" width="200" show-overflow-tooltip="">
          <template #default="scope">
            <el-date-picker v-model="scope.row.startShijian" type="datetime" placeholder="开始时间" :width="180" />
          </template>
        </el-table-column>
        <el-table-column prop="endShijian" label="结束时间" width="200" show-overflow-tooltip="">
          <template #default="scope">
            <el-date-picker v-model="scope.row.endShijian" type="datetime" placeholder="结束时间"  :width="180" />
          </template>
        </el-table-column>
        <el-table-column prop="quanzhong" label="权重" width="100" show-overflow-tooltip="">
          <template #default="scope">
            <el-input v-model="scope.row.quanzhong" placeholder="请输入权重" maxlength="64" clearable />
          </template>
        </el-table-column>
        <el-table-column prop="zongfen" label="总分" width="100" show-overflow-tooltip="" >
          <template #default="scope">
            <el-input v-model="scope.row.zongfen" placeholder="请输入总分" maxlength="64" clearable />
          </template>
        </el-table-column>
        <el-table-column prop="beizhu" label="备注" width="150" show-overflow-tooltip="">
          <template #default="scope">
            <el-input v-model="scope.row.beizhu" placeholder="请输入备注" maxlength="100" clearable />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100" align="center" fixed="right" show-overflow-tooltip="" v-if="auth('kaoshiXueke:save')">
          <template #default="scope">
            <el-button icon="ele-Delete" size="small" text="" type="primary" @click="delKaoshiXueke(scope.row)" v-auth="'kaoshiXueke:save'"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </el-dialog>
  </div>
</template>

<script lang="ts" setup="" name="kaoshiXueke">
  import { ref,onMounted } from "vue";
  import { ElMessageBox, ElMessage, tabsEmits } from "element-plus";
  import { auth } from '/@/utils/authFunction';
  import { getDictDataItem as di, getDictDataList as dl } from '/@/utils/dict-utils';
  import { formatDate } from '/@/utils/formatTime';

  import { pageKaoshiXueke, deleteKaoshiXueke,saveKaoshiXueke } from '/@/api/main/kaoshiXueke';
  import { getkaoshiKaoshiIdDropdown } from '/@/api/main/kaoshiXueke';
  import { getXuekeXuekeIdDropdown } from '/@/api/main/kaoshiXueke';

  	//父级传递来的参数
	var props = defineProps({
      title: {
      type: String,
      default: "",
    }
	});

  const isShowDialog = ref(false);
  const loading = ref(false);
  const tableData = ref<any>([]);
  const queryParams = ref<any>({});
  const tableParams = ref({
    page: 1,
    pageSize: 100,
    total: 0,
  });
  
  const kaoshiId = ref(0);

  const printKaoshiXuekeTitle = ref("");
  const editKaoshiXuekeTitle = ref(""); 

  // 查询操作
  const handleQuery = async () => {
    loading.value = true;
    queryParams.value.kaoshiId = kaoshiId.value;
    var res = await pageKaoshiXueke(Object.assign(queryParams.value, tableParams.value));
    tableData.value = res.data.result?.items ?? [];
    tableParams.value.total = res.data.result?.total;
    loading.value = false;
  };

  // 打开新增页面
  const openAddKaoshiXueke = () => {
    //editKaoshiXuekeTitle.value = '添加考试学科';
    //editDialogRef.value.openDialog({});
    tableData.value.push({kaoshiId:kaoshiId.value});
  };

  const saveXueke = async () => {
    //editKaoshiXuekeTitle.value = '添加考试学科';
    //editDialogRef.value.openDialog({});
    await saveKaoshiXueke({kaoshiId:kaoshiId.value,data:tableData.value});
    handleQuery();
    ElMessage.success("保存成功");
  };

  // 删除
  const delKaoshiXueke = (row: any) => {
    const index = tableData.value.indexOf(row);
    if (index !== -1) {
      tableData.value.splice(index, 1);
  }
  };
  
  const xuekeXuekeIdDropdownList = ref<any>([]); 
  const getXuekeXuekeIdDropdownList = async () => {
    let list = await getXuekeXuekeIdDropdown();
    xuekeXuekeIdDropdownList.value = list.data.result ?? [];
  };

  	// 打开弹窗
	const openDialog = async (row: any) => {
		// ruleForm.value = JSON.parse(JSON.stringify(row));
		// 改用detail获取最新数据来编辑
    //queryParams.value.kaoshiId = row.id;
    kaoshiId.value = row.id;
    handleQuery();
		isShowDialog.value = true;
	};

  getXuekeXuekeIdDropdownList();
  
  //handleQuery();

  //将属性或者函数暴露给父组件
	defineExpose({ openDialog });
  // 页面加载时
	onMounted(async () => {
	});

</script>
<style scoped>
:deep(.el-ipnut),
:deep(.el-select),
:deep(.el-input-number) {
	width: 100%;
}
</style>

